<template>
  <view class="min-h-screen bg-gray-50">
    <!-- 地图区域 -->
    <view class="relative h-600rpx bg-blue-100">
      <view class="absolute inset-0 flex items-center justify-center">
        <text class="text-32rpx text-gray-600">地图区域（模拟）</text>
      </view>
      
      <!-- 返回按钮 -->
      <view class="absolute top-32rpx left-32rpx">
        <nut-button size="small" type="default" @click="goBack">
          ← 返回
        </nut-button>
      </view>

      <!-- 配送状态 -->
      <view class="absolute bottom-32rpx right-32rpx bg-white rounded-24rpx px-24rpx py-16rpx shadow-lg">
        <text class="text-28rpx font-bold text-green-600">配送中</text>
      </view>
    </view>

    <!-- 订单信息卡片 -->
    <view class="bg-white mx-32rpx mt-(-60rpx) rounded-24rpx p-32rpx shadow-lg relative z-10">
      <view class="flex items-center justify-between mb-24rpx">
        <text class="text-32rpx font-bold text-gray-800">订单 #{{ orderInfo.id }}</text>
        <text class="text-28rpx text-gray-500">{{ orderInfo.createTime }}</text>
      </view>

      <!-- 配送信息 -->
      <view class="mb-32rpx">
        <view class="flex items-center mb-16rpx">
          <text class="text-28rpx mr-16rpx">🏪</text>
          <text class="text-28rpx text-gray-800">{{ orderInfo.storeName }}</text>
        </view>
        <view class="flex items-start">
          <text class="text-28rpx mr-16rpx">📍</text>
          <view class="flex-1">
            <text class="text-28rpx font-medium text-gray-800 block">{{ orderInfo.address.name }}</text>
            <text class="text-26rpx text-gray-600 block">{{ orderInfo.address.phone }}</text>
            <text class="text-26rpx text-gray-600">{{ orderInfo.address.detail }}</text>
          </view>
        </view>
      </view>

      <!-- 预计送达时间 -->
      <view class="bg-orange-50 rounded-16rpx p-24rpx mb-32rpx">
        <view class="flex items-center justify-between">
          <text class="text-28rpx text-orange-600">预计送达时间</text>
          <text class="text-32rpx font-bold text-orange-600">{{ estimatedArrivalTime }}</text>
        </view>
        <text class="text-24rpx text-orange-500 mt-8rpx block">还剩 {{ remainingTime }} 分钟</text>
      </view>
    </view>

    <!-- 商品列表 -->
    <view class="bg-white mx-32rpx mt-32rpx rounded-24rpx p-32rpx">
      <text class="text-32rpx font-bold text-gray-800 block mb-24rpx">商品详情</text>
      
      <view 
        v-for="item in orderInfo.items" 
        :key="item.id"
        class="flex justify-between items-center py-16rpx border-b border-gray-100 last:border-b-0"
      >
        <view class="flex-1">
          <text class="text-28rpx text-gray-800 block">{{ item.name }}</text>
          <text class="text-24rpx text-gray-500">{{ item.specifications }}</text>
        </view>
        <view class="text-right">
          <text class="text-28rpx text-gray-800 block">x{{ item.quantity }}</text>
          <text class="text-24rpx text-gray-500">¥{{ item.price.toFixed(2) }}</text>
        </view>
      </view>

      <view class="flex justify-between items-center pt-24rpx mt-24rpx border-t border-gray-200">
        <text class="text-30rpx font-bold text-gray-800">总计</text>
        <text class="text-32rpx font-bold text-red-500">¥{{ orderInfo.totalAmount.toFixed(2) }}</text>
      </view>
    </view>

    <!-- 配送操作区域 -->
    <view class="bg-white mx-32rpx mt-32rpx rounded-24rpx p-32rpx">
      <text class="text-32rpx font-bold text-gray-800 block mb-24rpx">配送操作</text>
      
      <view class="grid grid-cols-2 gap-24rpx">
        <nut-button 
          type="default" 
          size="large"
          class="flex items-center justify-center"
          @click="callCustomer"
        >
          📞 联系客户
        </nut-button>
        
        <nut-button 
          type="default" 
          size="large"
          class="flex items-center justify-center"
          @click="openNavigation"
        >
          🧭 打开导航
        </nut-button>
      </view>
    </view>

    <!-- 配送进度 -->
    <view class="bg-white mx-32rpx mt-32rpx rounded-24rpx p-32rpx">
      <text class="text-32rpx font-bold text-gray-800 block mb-24rpx">配送进度</text>
      
      <view class="space-y-24rpx">
        <view 
          v-for="(step, index) in deliverySteps" 
          :key="index"
          class="flex items-start"
        >
          <view 
            class="w-40rpx h-40rpx rounded-full flex items-center justify-center mr-24rpx mt-8rpx"
            :class="step.completed ? 'bg-green-500' : 'bg-gray-300'"
          >
            <text class="text-white text-24rpx">{{ step.completed ? '✓' : index + 1 }}</text>
          </view>
          <view class="flex-1">
            <text 
              class="text-28rpx block"
              :class="step.completed ? 'text-green-600 font-medium' : 'text-gray-500'"
            >
              {{ step.title }}
            </text>
            <text v-if="step.time" class="text-24rpx text-gray-400">{{ step.time }}</text>
          </view>
        </view>
      </view>
    </view>

    <!-- 底部操作按钮 -->
    <view class="fixed bottom-0 left-0 right-0 bg-white border-t border-gray-200 p-32rpx">
      <nut-button 
        type="primary" 
        size="large"
        class="w-full bg-green-500 border-green-500"
        @click="completeDelivery"
      >
        确认送达
      </nut-button>
    </view>

    <!-- 底部安全区域 -->
    <view class="h-160rpx"></view>
  </view>
</template>

<script setup lang="ts">
import { ref, computed, onMounted } from 'vue'
import Taro, { useRouter } from '@tarojs/taro'

/**
 * 骑手配送页面 - 实时配送跟踪
 * 性能优化：地图懒加载，实时位置更新
 */

interface OrderItem {
  id: number
  name: string
  quantity: number
  price: number
  specifications: string
}

interface Address {
  name: string
  phone: string
  detail: string
}

interface DeliveryStep {
  title: string
  time?: string
  completed: boolean
}

interface OrderInfo {
  id: string
  createTime: string
  storeName: string
  address: Address
  items: OrderItem[]
  totalAmount: number
  estimatedTime: number
}

const router = useRouter()

// 响应式数据
const remainingTime = ref(15)

// 模拟订单信息
const orderInfo = ref<OrderInfo>({
  id: 'D001',
  createTime: '10:30',
  storeName: '奶茶小铺（三里屯店）',
  address: {
    name: '张先生',
    phone: '138****8888', 
    detail: '北京市朝阳区三里屯SOHO A座1202'
  },
  items: [
    {
      id: 1,
      name: '珍珠奶茶',
      quantity: 2,
      price: 18,
      specifications: '大杯，少冰，七分糖'
    },
    {
      id: 2, 
      name: '芒果布丁奶茶',
      quantity: 1,
      price: 22,
      specifications: '中杯，常温，五分糖'
    }
  ],
  totalAmount: 58,
  estimatedTime: 25
})

// 配送步骤
const deliverySteps = ref<DeliveryStep[]>([
  { title: '已接单', time: '10:30', completed: true },
  { title: '商家准备中', time: '10:32', completed: true },
  { title: '开始配送', time: '10:45', completed: true },
  { title: '即将送达', completed: false },
  { title: '订单完成', completed: false }
])

// 计算属性
const estimatedArrivalTime = computed(() => {
  const now = new Date()
  const arrivalTime = new Date(now.getTime() + remainingTime.value * 60 * 1000)
  return `${arrivalTime.getHours().toString().padStart(2, '0')}:${arrivalTime.getMinutes().toString().padStart(2, '0')}`
})

// 方法
const goBack = () => {
  Taro.navigateBack()
}

const callCustomer = () => {
  Taro.makePhoneCall({
    phoneNumber: orderInfo.value.address.phone.replace(/\*/g, '8')
  })
}

const openNavigation = () => {
  // 实际项目中会打开地图导航
  Taro.showToast({
    title: '打开导航',
    icon: 'success'
  })
}

const completeDelivery = () => {
  Taro.showModal({
    title: '确认送达',
    content: '确认已将商品送达客户手中？',
    success: (res) => {
      if (res.confirm) {
        // 更新配送状态
        deliverySteps.value[3].completed = true
        deliverySteps.value[3].time = new Date().toLocaleTimeString('zh-CN', { 
          hour: '2-digit', 
          minute: '2-digit' 
        })
        deliverySteps.value[4].completed = true
        deliverySteps.value[4].time = new Date().toLocaleTimeString('zh-CN', { 
          hour: '2-digit', 
          minute: '2-digit' 
        })
        
        Taro.showToast({
          title: '配送完成',
          icon: 'success'
        })
        
        // 延迟跳转
        setTimeout(() => {
          Taro.navigateBack()
        }, 1500)
      }
    }
  })
}

// 生命周期
onMounted(() => {
  console.log('配送页面加载完成')
  
  // 模拟倒计时
  const timer = setInterval(() => {
    if (remainingTime.value > 0) {
      remainingTime.value--
    } else {
      clearInterval(timer)
    }
  }, 60000) // 每分钟更新一次
})
</script>

<style lang="scss" scoped>
.grid {
  display: grid;
}

.grid-cols-2 {
  grid-template-columns: repeat(2, 1fr);
}

.gap-24rpx {
  gap: 24rpx;
}

.space-y-24rpx > view:not(:first-child) {
  margin-top: 24rpx;
}

.last\:border-b-0:last-child {
  border-bottom: 0;
}

.mt-\(-60rpx\) {
  margin-top: -60rpx;
}
</style> 